<template>
    <el-table :data="filteredData" border style="width: 100%">
      <el-table-column
        v-for="col in visibleColumns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        align="center"
      />
    </el-table>
  </template>
  
  <script setup>
  import { computed } from "vue"
  
  // props：数据 + 字段定义
  const props = defineProps({
    data: { type: Array, default: () => [] },
    columns: { // 每个字段名和显示名的映射
      type: Array,
      default: () => [
        { prop: "noise", label: "噪音" },
        { prop: "vibration", label: "震动" },
        { prop: "temperature", label: "温度" },
        { prop: "current", label: "电流" },
        { prop: "collectTime", label: "采集时间" }
      ]
    }
  })
  
  // 过滤掉整列都为空的字段
  const visibleColumns = computed(() => {
    if (!props.data.length) return []
    return props.columns.filter(col =>
      props.data.some(row => row[col.prop] !== null && row[col.prop] !== "")
    )
  })
  
  // 如果有多行数据，可以过滤掉空对象
  const filteredData = computed(() =>
    props.data.filter(row =>
      Object.values(row).some(v => v !== null && v !== "")
    )
  )
  </script>
  